<template>
	<view class="goods-item" @click="goodsHandle(goodsInfo.id)">
		<image class="goods-item-img" :src="goodsInfo.listImage" mode="aspectFill"></image>
		<view class="goods-item-name text-flemp2">
			{{goodsInfo.name}}
		</view>
		<view class="goods-item-price">
			<text class="current-price">￥ {{goodsInfo.productDetail.sellingPrice}}</text>
			<!-- <text class="preve-price">￥ 799.22</text> -->
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, } from 'vue'

export default defineComponent({
	props: {
		goodsInfo:  {
			type: Object,
			default: () => ({})
		},
	}, 
	setup(props, ctx) { 
		const goodsHandle = (id: number) => { 
			ctx.emit('goodsClick', { id }) 
		}
		
		return {
			goodsHandle
		}
	}
})
</script>

<style scoped lang="scss">
.goods-item{
	width: 342rpx;
	height: 548rpx;
	background: #ffffff;
	border-radius: 8rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	.goods-item-img{
		width: 342rpx;
		height: 364rpx;
	}
	.goods-item-name{ 
		font-size: 26rpx; 
		font-weight: 500; 
		color: #333333;
		line-height: 30rpx;
		margin: 16rpx;
	}
	.goods-item-price{
		padding: 16rpx;
		.current-price{ 
			font-size: 32rpx;
			font-weight: 500;
			color: #eb5883;
			line-height: 38rpx;
			padding-right: 20rpx;
		}
		.preve-price{
			font-size: 26rpx;
			font-weight: 500;
			text-decoration:  line-through;
			color: #b8b8b8;
			line-height: 30rpx;
		}
	}
}
</style>